import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Extras 1.4
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.4

Item {
    id: element
    width: 192
    height: width*1.4
    property string element_tipText: "Ug(%)"
    property string element_cnmsgText: "定子电流"
    property string element_numsizeText: "V"
    property real text_value: 0
    property int text_valueLengthAfterPoint: 0
    property alias circularGaugeMaximumValue: circularGauge.maximumValue
    property alias circularGaugeMinimumValue: circularGauge.minimumValue
    property real circularGaugeHighlightValue: 80
    property real circularGaugeHighlightValueLow: -60
    property real circularGaugeValue: 0

    property real minSize:  Math.min(width/192, height/269)

    ConicalGradient{
        id: radialGradient
        width: parent.width*0.9
        height: width
        clip: true
        anchors.centerIn: circularGauge
        smooth: true
        antialiasing: true

        property color color1:(circularGauge.value<circularGaugeHighlightValue&&circularGauge.value>circularGaugeHighlightValueLow)?"#8800ced1":"#88ff7f50"

        source: Rectangle {
            width: radialGradient.width
            height: radialGradient.width
            color: "transparent"
            border.color: "green"
            border.width: radialGradient.width*0.3
            radius: width / 2
        }
        gradient: Gradient {
            GradientStop { position: 0.0; color: "transparent" }
            GradientStop { position: 180/360-Math.abs(circularGauge.value)/200*290/360-0.002; color: "transparent" }
            GradientStop { position: 180/360-Math.abs(circularGauge.value)/200*290/360-0.001; color: circularGauge.value>0?"transparent":radialGradient.color1 }
            GradientStop { position: 180/360; color: "#445a5858" }
            GradientStop { position: 180/360+Math.abs(circularGauge.value)/200*290/360+0.001; color: circularGauge.value>0?radialGradient.color1:"transparent" }
            GradientStop { position: 180/360+Math.abs(circularGauge.value)/200*290/360+0.002; color: "transparent" }
//            GradientStop { position: circularGauge.value/200*290/360+0.01; color: "transparent" }
            GradientStop { position: 1.0; color: "transparent" }
        }
        transform: Rotation
        {
            origin.x: radialGradient.width/2;
            origin.y: radialGradient.width/2;
            axis { x: 0; y: 0; z: 1 }
            angle: -180
        }
    }

    CircularGauge {
        id: circularGauge
        width: parent.width
        height: width
        scale: 0.9
        value: circularGaugeValue<maximumValue?
                   (circularGaugeValue>minimumValue?
                        circularGaugeValue:minimumValue):maximumValue
        maximumValue: 200
        minimumValue: 0

        style: CircularGaugeStyle
        {
            needle: Rectangle {
                y: outerRadius * 0.15
                color: "#DDDDDD"
                implicitWidth: outerRadius * 0.03
                implicitHeight: outerRadius * 0.8
                antialiasing: true
            }
            foreground: Item {
                Rectangle {
                    width: outerRadius * 0.2
                    height: width
                    radius: width / 2
                    color: "#DDDDDD"
                    anchors.centerIn: parent
                }
            }
            tickmarkStepSize: 20
            labelInset: 20

            tickmarkLabel:  Text {
                font.pixelSize: Math.max(6, outerRadius * 0.2)
                text: styleData.value
                color: (styleData.value >= circularGaugeHighlightValue || styleData.value <= circularGaugeHighlightValueLow) ? "#e34c22" : "#DDDDDD"
                antialiasing: true
            }
            tickmark: Rectangle {
                visible: styleData.value < 80 || styleData.value % 10 == 0
                implicitWidth: outerRadius * 0.02
                antialiasing: true
                implicitHeight: outerRadius * 0.06
                color: (styleData.value >= circularGaugeHighlightValue || styleData.value <= circularGaugeHighlightValueLow) ? "#e34c22" : "#DDDDDD"
            }
            minorTickmark: Rectangle {
                visible: styleData.value < circularGaugeHighlightValue && styleData.value > circularGaugeHighlightValueLow
                implicitWidth: outerRadius * 0.01
                antialiasing: true
                implicitHeight: outerRadius * 0.03
                color: "#DDDDDD"
            }
            function degreesToRadians(degrees) {
                return degrees * (Math.PI / 180);
            }

            background: Canvas {
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.reset();

                    ctx.beginPath();
                    ctx.strokeStyle = "#e34c22";
                    ctx.lineWidth = outerRadius * 0.02;

                    ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2,
                        degreesToRadians(valueToAngle(circularGaugeHighlightValue) - 90), degreesToRadians(valueToAngle(circularGaugeMaximumValue) - 90));
//                    ctx.closePath()
                    ctx.stroke();

                    ctx.beginPath();
                    ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2,
                        degreesToRadians(valueToAngle(circularGaugeMinimumValue) - 90), degreesToRadians(valueToAngle(circularGaugeHighlightValueLow ) - 90));
                    ctx.stroke();
                }
            }
        }
        Behavior on value {
            NumberAnimation { duration: 100 }
        }
    }

    Text {
        id: element_tip
        color: "#40FFAA"
        text: qsTr(element_tipText)
        anchors.bottomMargin: 12
        anchors.bottom: circularGauge.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        font.pixelSize: 18*parent.minSize
    }

    Text {
        id: text_valueNum
        width: 60
        color: "#40FFAA"
        text: text_value.toFixed(text_valueLengthAfterPoint)
        horizontalAlignment: Text.AlignRight
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: circularGauge.bottom
        font.pixelSize: 25*parent.minSize
    }

    Text {
        id: element_numsize
        color: "#40FFAA"
        text: element_numsizeText
        anchors.left: text_valueNum.right
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: circularGauge.bottom
        font.pixelSize: 25*parent.minSize
    }

    Text {
        id: element_cnmsg
        color: "#40FFAA"
        text: element_cnmsgText
        font.bold: true
        font.family: "Verdana"
        textFormat: Text.AutoText
        anchors.topMargin: 13
        horizontalAlignment: Text.AlignHCenter
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: element_numsize.bottom
        font.pixelSize: 30*parent.minSize

    }
}
